<template>
	<view>
		
		<view class="mask" @click="cancel"></view>
		<!-- 注册成功 -->
		<view class="model" v-if="modelType == 1">
			<view class="titleTip" v-if='!logo'>注册成功</view>
			<view class="logo">
				<image :src="imgUrl + logo" mode="widthFix"></image>
			</view>
			<view class="msgTip">账号可用于下次登录</view>
			<view class="btns">
				<view class="btn-cancel" @click="cancel">取消</view>
				<view class="btn-yes thmeBg" @click="backPage" :style="{'--color': color}">返回</view>
			</view>
		</view>
		
		
		<!-- 判断vid -->
		<view class="model" v-if="modelType == 2" style="min-height: 494rpx;">
			<view class="titleTip" v-if='!logo'>请先登录/注册</view>
			<view class="logo">
				<image :src="imgUrl + logo" mode="widthFix"></image>
			</view>
			<view class="msgTip">会员登录，获取更多优惠</view>
			<view class="btns">
				<!-- #ifdef H5 -->
				<button class="btn-cancel" data-type="1" @click="toRegister">登录</button>
				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<button class="btn-cancel" v-if='!noAuth' @click='getuserinfos_'>获取授权</button>
				<!-- <button class="btn-cancel" v-if='!noAuth' open-type='getUserInfo' @getuserinfo='getuserinfo_'>获取授权</button> -->
				<button class="btn-yes thmeBg" :style="{'--color': color}" style="color: white;" type="default" v-if='noAuth' open-type="getPhoneNumber" @getphonenumber="getPhoneNumberHandler">快捷登录</button>
				
				<!-- #endif -->
				
				<!-- #ifdef MP-TOUTIAO || APP-PLUS -->
				<button class="btn-cancel thmeColor" data-type="1" @click="toRegister" :style="{'--color': color}">立即登录</button>
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<view class="btn-yes thmeBg" :style="{'--color': color}" data-type="0" @click="toRegister">手动注册</view>
				<!-- #endif -->
			</view>
		</view>
		
		<view class="model" v-if="modelType == 100" style="min-height: 494rpx;">
			<view class="logo">
				<image :src="imgUrl + logo" mode="widthFix"></image>
			</view>
			<view class="msgTip">会员登录，获取更多优惠</view>
			<view class="btns">
				<!-- #ifdef MP-WEIXIN -->
				<!-- <button class="btn-yes thmeBg" :style="{'--color': color}" style="color: white;" type="default" v-if='noAuth' open-type="getPhoneNumber" @getphonenumber="getPhoneNumberHandler">快捷登录</button> -->
				<button class="btn-cancel" @click='getuserinfos_'>获取授权</button>
				<!-- #endif -->
			</view>
		</view>
		
		

		<!-- 通用版 -->
		<view class="model" v-if="modelType == 99">
			<view class="titleTip">{{title}}</view>
			<view class="msgTip">{{msg}}</view>
			<view class="btns">
				<view class="btn-cancel" v-if='btn1' @click="cancel">{{btn1}}</view>
				<view class="btn-cancel" v-if='btn3' @click="backHome">{{btn3}}</view>
				<view class="btn-yes thmeBg" :style="{'--color': color}" @click="certain">{{btn2}}</view>
			</view>
		</view>
	
		<Coupon v-if="CouponShow && couponArry" :couponArry="couponArry" @closeFunc="CouponShow=false"></Coupon>
		
		
	
	</view>
</template>


<script>
	var that
	import API from '../../api/index.js' 
	import Coupon from "../Coupons.vue"
	export default {
		 /**
		  * goHome登录成功后是否返回首页  0不返回  1/null返回  
		  * btn1:取消按钮文字 
		  * btn2：确定按钮文字
		  * btn3：返回首页文字
		  * msg：提示文字
		  * title: 标题
		  * **/  
		props: ['type', 'title', 'msg', 'goHome','btn1','btn2','btn3', 'btn1_url', 'btn2_url', 'jump'],
		data() {
			return {
				color: getApp().globalData.color,
				modelType: this.type, // 弹窗类型
				openid: '',
				userinfo:'',
				noAuth: null ,// 用户未授权 true已授权 false未授权
				logo:'',
				imgUrl: this.imgUrl,
				CouponShow: false,
				couponArry:''
			}
		},
		components:{ Coupon },
		watch: {
			type(e) {
				this.modelType = e
			}
		},
		created() {
			that = this
			if(that.type == 1 || that.type == 2 || that.type == 100){
				that.logo = uni.getStorageSync('startUp').logo_img
			}
			if(that.type == 2){
				that.openid = uni.getStorageSync('openid')
				that.userinfo = uni.getStorageSync('userinfo')
				if(!that.openid || !that.userinfo || that.userinfo.nickName == '微信用户') {
					API.user.getOpenid().then(openid=>{
						that.openid = openid
					})
				}else {
					that.noAuth_type = true
				}
			}
		},
		methods: {
			backPage() {
				uni.navigateBack({
					delta:1
				})
			},
			cancel() { //取消
				this.$emit("cancelFunc")
			},
			certain() { //确定
				this.$emit("certain")
			},
			toRegister(e) {
				var type = e.currentTarget.dataset.type;
				this.$emit("cancelFunc")
				uni.navigateTo({
					url: '/userPage/login/binding?type=' + type
				})
			},
			getuserinfos_(e) {
				let that = this;
				uni.getUserProfile({
					desc: 'Wexin',
					success: res => {
						if (res.userInfo) {
							uni.setStorage({
								key: 'userinfo',
								data: res.userInfo,
								success() {
									that.noAuth = true
								}
							})
							
							that.$emit('showModal');
							API.user.getVid()
						}else{
							uni.showModal({
								title: '拒绝授权会影响功能使用',
								icon: 'none',
								showCancel: false,
							})
							that.$emit('showModal')
						}
						// console.log(res)
					},
					fail: err => {
						console.log(err);
					}
				})
			},
			getuserinfo_(e) {
				var that = this;
				if (e.detail.userInfo) {
					uni.setStorage({
						key: "userinfo",
						data: e.detail.userInfo,
						success() {
							that.noAuth = true
						}
					})
				}
			},
	
			getPhoneNumberHandler(e){
				const info = uni.getStorageSync('userinfo');
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					that.$http.post({
						url: '/zzj_singleSaleApi/authorizedLogin',
						data: {
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							session_key: uni.getStorageSync('session_key'),
							bid: uni.getStorageSync('bid'),
							openid: that.openid, 
							nickName: info.nickName, //暱稱
							headimg: info.avatarUrl, //頭像 
							share_v_id: uni.getStorageSync("share_v_id"), //分享id
							city: info.city,
							sex: info.gender?info.gender:info.sex, //性別
							country: info.country, //國家
							province: info.province //省份
						}
					}).then(res => {
						if (res.status) {
							if(res.v_id && res.v_id != 0){
								uni.setStorage({
									key: "vid",
									data: res.v_id
								})
							}
							if(res.coupon && res.coupon.status == 1){ // 1 有券  0 无券
								that.couponArry = true
								that.CouponShow = res.coupon.data
							}
							/**
							 * 重新走一次获取用户其他信息：如是否有购买权限
							 * **/ 
							 API.user.getVid()
							that.cancel(); // 关闭弹窗
						}
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						})
					})
				}else{
					uni.showToast({title:'微信未认证'+e.detail.errMsg,icon:'none'})
				}
			},
			// getPhoneNumberHandler(e) {
			// 	const info = uni.getStorageSync('userinfo');
			// 	console.log(info,'1')
			// 	let vid = uni.getStorageSync('vid')
			// 	if(!that.openid || !that.userinfo ||!vid){
			// 		API.user.getOpenid().then(openid=>{
			// 			that.openid = openid
			// 			// #ifdef MP
			// 			that.authorizedLogin(e)
			// 			// #endif
			// 		})
			// 	}
			// }
		}
	}
</script>

<style scoped lang="scss">
	/* 弹窗样式 */
	.masks {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .6);
		z-index: 1000;
	}

	.model {
		position: fixed;
		width: 654rpx;
		/* height: 320rpx; */
		left: 50%;
		top: 50%;
		border-radius: 32rpx;
		transform: translate(-50%, -50%);
		background: white;
		overflow: hidden;
		z-index: 999;
	}

	.titleTip {
		font-size: 36rpx;
		height: 111rpx;
		line-height: 160rpx;
		font-weight: bold;
		text-align: center;
	}

	.msgTip {
		font-size: 28rpx;
		color: #999999;
		text-align: center;
		padding: 30rpx 66rpx;
	}

	.btns {
		display: flex;
		justify-content: center;
		padding: 50rpx;
	}

	.btn-cancel {
		width: 260rpx;
		font-size: 30rpx;
		text-align: center;
		color: #969696;
		border: 1px solid #AFAFAF;
		border-radius: 68rpx;
		line-height: 68rpx;
		background: none;
		margin: 0 10rpx;
	}

	.btn-yes {
		width: 260rpx;
		font-size: 30rpx;
		color: white;
		text-align: center;
		border-radius: 68rpx;
		line-height: 68rpx;
		margin: 0 10rpx;
	}
	.logo{
		display: block;
		width: 222rpx;
		padding-top: 40rpx;
		margin: 0 auto;
		image{
			width: 100%;
		}
	}
	
	
	.mask{
		display: flex;
		align-items: center;
		justify-content: center;
		.model{
			background-color: #FFFFFF;
			border-radius: 12rpx;
			width: 600rpx;
			text-align: center;
			overflow: hidden;
			padding-top: 20rpx;
			.title{
				font-size: 32rpx;
				font-weight: bold;
				padding: 40rpx;
				color: #333333;
			}
			.info{
				font-size: 28rpx;
				padding: 20rpx 40rpx 40rpx;
				color: #666666;
			}
			.btns{
				.cancel{
					flex: 1;
					line-height: 88rpx;
					color: #999999;
					border-top: 1px solid #eeeeee;
				}
				.certain{
					flex: 1;
					line-height: 88rpx;
					background-color: #F8814E;
					color: white;
				}
			}
		}
	}
</style>
